<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
.msg-itembox{
	width: auto;
	height: auto;
	display: flex;
	display: -webkit-flex;
	padding:5px;
}
.usericon{
	width:3rem;
	height: 3rem;
}
.usermsg{
	flex: 1;
	-webkit-flex: 1;
	position: relative;
}
.msgjt{
	position: absolute;
	right:0;
	top:0.5rem;
	width:0; 
	height:0; 
	border-width:0.5rem; 
	border-style:solid; 
	border-color:transparent transparent  transparent #ABD33C; 
	font-size:0; 
	line-height:0;
}
.umsg{
	display: block;
	width: auto;
	height: auto;
	background:#fff;
	border-radius: 0.2rem;
	padding:0.5rem;
	float: left;
	box-shadow:0 0 1px #ccc;
	-webkit-box-shadow:0 0 1px #999;
	margin-left:1rem;
}
.umsg-my{
	float: right;
	margin-right:1rem;
	background-color: #ABD33C;
	-webkit-box-shadow:0 0 1px #ABD33C;
}
.msgdate{
	text-align: center;
	padding:1rem 0 1rem 0;
}
.msgspan{
	background: #ccc;
	padding:0.3rem  0.5rem 0.3rem  0.5rem;
	border-radius: 0.2rem;
	font-size:12px;
	color: #fff;
}
	#pubpinglun{
		width: 94%;
		height: 3rem;
		background:#ddd;
		text-align: center;
		line-height:3rem;
		font-size:14px;
		margin-bottom: 0.5rem;
		border-radius: 0.3rem;
	}
	#footerbar{
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
		/*定义为flexbox的"父元素"*/
	    display: -webkit-box; 
	    display: -webkit-flex;
	    display: flex;
	}
	.footerbar{
		position:fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	#jcontent{
		padding-bottom: 12rem;
	}
	#addsixinbox{
		box-shadow:0 0 1px #999;
		-webkit-box-shadow:0 0 3px #999;
		width: 100%;
		position: fixed;
		height:10rem;
		background:#fff;
		bottom: 0;
		left: 0;
		padding: 10px;
	}
	.sixinarea{
		display: block;
		width: 100%;
		height: 6rem;
		font-size:14px;
		padding: 0.5rem;
		border: 1px solid #eee;
	}
	.sixinarea:focus{
		outline: none;
	}
	.ssbar{
		padding-top: 0.5rem;
	}
	.ssbar-left{
		float: left;
	}
	.biaoqin-inner{
		display: inline-block;
		width:5rem;
		height: 4rem;
		line-height: 4rem;
		font-size:14px;
	}
	.ssbar-right{
		float: right;
	}
	#ssbar-right-bten{
		display: block;
		width:5rem;
		height: 2.5rem;
		background: dodgerblue;
		text-align: center;
		line-height:2.5rem;
		border-radius: 0.2rem;
		color: #fff;
	}
	.animated {
	  -webkit-animation-duration: 0.5s;
	  animation-duration: 0.5s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}
		
	@-webkit-keyframes fadeInUpBig {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 200px, 0);
		    transform: translate3d(0, 200px, 0);
		  }
		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
	}
	 
	@keyframes fadeInUpBig {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 200px, 0);
	    transform: translate3d(0, 200px, 0);
	  }
	 
	  to {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	  }
	}

	.fadeInUpBig {
	  -webkit-animation-name: fadeInUpBig;
	  animation-name: fadeInUpBig;
	}
	
	@-webkit-keyframes fadeOutDownBig {
	  from {
	    opacity: 1;
	  }
	
	  to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 200px, 0);
	    transform: translate3d(0, 200px, 0);
	  }
	}
	
	@keyframes fadeOutDownBig {
	  from {
	    opacity: 1;
	  }
	
	  to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 200px, 0);
	    transform: translate3d(0, 200px, 0);
	  }
	}
	
	.fadeOutDownBig {
	  -webkit-animation-name: fadeOutDownBig;
	  animation-name: fadeOutDownBig;
	}
	
	#xxtitle{
		width: auto;
		height: 4rem;
		line-height: 4.8rem;
		text-align: center;
	}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div id="data-list"></div>
</div>
<div id="footerbar" class="footerbar">
	<a id="pubpinglun"><i class="iconfont icon-i2"></i>&nbsp;&nbsp;编辑私信</a>
</div>


<div id="addsixinbox" class="animated hide">
	<textarea id="sixinarea" class="sixinarea" placeholder="请输入您要咨询的问题"></textarea>
	<div class="ssbar">
		<div class="ssbar-left">
			<a class="biaoqin-inner"><i class="iconfont icon-biaoqing-copy"></i></a>
			<a id="yuyin" class="biaoqin-inner"><i class="iconfont icon-yuyin"></i></a>
		</div>
		<div class="ssbar-right">
			<a id="ssbar-right-bten">发送</a>
		</div>
	</div>
</div>


<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	//加载数据
	webapp.ajax({
		url:"/carLife/admin/interface/privateLetter/selectNotReadBySellerId",
		data:{
			sellerId:webapp.GetQueryString("business")
		},
		success:function(json){
			json.imgpath=webapp.config.restUrl;
			webapp.debug(json)
			if(json.code=="200"){
				var html=template("tpl-list",json);
				document.getElementById("data-list").innerHTML=html;
			}
		}
	});
});
 
 

mui('#footerbar').on('tap','#pubpinglun', function() {
	var cla=document.getElementById("addsixinbox").classList;
	cla.remove("fadeOutDownBig");
	cla.add("fadeInUpBig");
	cla.remove("hide");
	document.getElementById("sixinarea").focus();
});

mui('#addsixinbox').on('tap','#ssbar-right-bten', function() {
	var content=document.getElementById("sixinarea").value;
	if(webapp.util.isNull(content)){
		mui.toast("请输入内容");
		return false;
	}
	
	
	var s=document.querySelectorAll(".noread");
	var ids=[];
	for(var i=0;i<s.length;i++){
		ids.push(s[i].getAttribute("data-msgid"));
	}
	
//	//创建一个文档片段
	var　d=new Date();
	var myhtml=template("tpl-list",{
		data:[
		{
			createTime:d.getTime(),
			type:2,
			content:content,
			imgpath:webapp.config.restUrl,
			logoImage:""
		}]
	});
	var fragment = document.createDocumentFragment();
	var dom = document.createElement('div');
	dom.className ='msgblock';
	dom.innerHTML=myhtml;
	fragment.appendChild(dom); 
//	//创建文档片段结束
	document.getElementById("data-list").appendChild(fragment);
//	
	webapp.ajax({
		url:"/carLife/admin/interface/privateLetter/sendMessage",
		data:{
			sellerId:webapp.GetQueryString("business"),
			targetIds:ids.join(","),
			content:content
		},
		success:function(json){
			webapp.debug(json);
		}
	});
	//
	var t=document.getElementById("sixinarea");
	t.blur();
	t.value="";
	
	var cla=document.getElementById("addsixinbox").classList;
	cla.add("fadeOutDownBig");
	cla.remove("fadeInUpBig");
	cla.add("hide");
	
}); 
</script>

<script id="tpl-list" type="text/html">
{{each data as item i}}
<div class="msgblock">
<div class="msgdate"><span class="msgspan">{{dateFormat(item.createTime,"yyyy-MM-dd HH:mm")}}</span></div>
<div class="msg-itembox noread" data-msgid="{{item.id}}">
	{{if item.type==1}}
	<div class="usericon"><img src="{{imgpath}}{{item.logoImage}}" class="img"/></div>
	<div class="usermsg">
		<div class="umsg">{{item.content}}</div>
	</div>
	{{else}}
	<div class="usermsg">
		<div class="umsg umsg-my">{{item.content}}</div>
		<div class="msgjt"></div>
	</div>
	<div class="usericon"><img src="../img/zw.png" class="img"/></div>
	{{/if}}
</div>
</div>
{{/each}}
</script>
</body>
</html>
